<link rel="stylesheet" href="../src/css/pages/audienceManager.css">
<div class="fmp-container">
    <div class="container-fluid">
        <div class="ndp-tab-wrapper" name="plain-tab" style="margin:5px 0 10px 0;"></div>

        <!--<button class="btn btn-primary createAudience">{{i18n-createAudience}}</button>-->
        <div class="table-c">
            <table list-manager="audienceManagerList">
                <thead>
                    <tr>
                        <th width="55" th-name="order">{{i18n-order}}</th>
                        <th th-name="name">{{i18n-name}}</th>
                        <th th-name="adAccount">{{i18n-adAccount}}</th>
                        <th th-name="potentialUser">{{i18n-potentialUser}}</th>
                        <th th-name="updateTime">{{i18n-updateTime}}</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="create-audience" class="modal fade">
    <div class="modal-dialog modal-890">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{i18n-createAudience}}</h4>
                <div class="verify-tip"></div>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary generate-btn hide">{{i18n-verifyAudience}}</button>
                <div class="useraudience-success hide">{{i18n-potentialReach}}<span></span></div>
                <button type="button" class="btn btn-primary ok-btn disabled">{{i18n-confirm}}</button>
                <button type="button" class="btn btn-default cancel-btn" data-dismiss="modal">{{i18n-cancel}}</button>
            </div>
        </div>

            <!-- /.modal-content -->
    </div>
        <!-- /.modal-dialog -->
    </div>

<div id="verify-audience" class="modal fade">
    <div class="modal-dialog modal-690">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{i18n-verifyAudience}}</h4>
            </div>
            <div class="modal-body">
                <div class="verify-audience-c">
                    <div class="v-p-c">
                        <div class="ndp-drop-wrapper verify-audience-p" name="verify-audience-p"></div>
                    </div>
                    <div class="warning-r hide" for="verify-audience-p">
                        {{i18n-selectProductSetR}}
                    </div>
                </div>
                <div class="disable-content hide">
                    <div clss="disable-content-v">
                        <div class="go-account">
                           <span class="f-20">{{i18n-bindAccout}}<a href="#!adPublishCondition" class="btn btn-link d-a">{{i18n-productManage}}</a>{{i18n-setAccout}}</span>
                        </div>
                        <div class="go-product-set">
                            <span class="f-20"> <a href="#!sets" class="btn btn-link d-a">{{i18n-productSet}}</a></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary ok-btn">{{i18n-confirm}}</button>
                <button type="button" class="btn btn-default cancel-btn" data-dismiss="modal">{{i18n-cancel}}</button>
            </div>
            <!-- /.modal-content -->
        </div>

        <!-- /.modal-dialog -->
    </div>
</div>

<div id="t-create-audience-content" class="hide">
    <div class="create-audience-body">
        <div class="a-m-c hide">
            <div>
                <div class="item-block">
                    <label class="item-title">
                        {{i18n-audienceRule}}
                    </label>
                    <div class="item-content">
                        <!--<div class="product-set-c">-->
                        <!--<label class="s-item-title">产品系列：</label>-->
                        <!--<div class="s-item-content"><span>All Products</span></div>-->
                        <!--</div>-->

                        <div class="rule-item">

                        </div>
                        <button class="btn btn-primary btn-plus"><i class="glyphicon glyphicon-plus"></i></button>
                    </div>
                </div>
                <div class="item-block">
                    <label class="item-title">
                        {{i18n-pageType}}
                    </label>
                    <div class="item-content">
                        <label class="checkbox-p"><input type="checkbox" name="page-type" value="mobilefeed">{{i18n-mobileNewsFeed}}</label>
                        <label class="checkbox-p"><input type="checkbox" name="page-type" value="mobileexternal">{{i18n-audienceNetwork}}</label>
                        <label class="checkbox-p"><input type="checkbox" name="page-type" value="desktopfeed">{{i18n-desktopNewsFeed}}</label>
                        <label class="checkbox-p"><input type="checkbox" name="page-type" value="rightcolumn">{{i18n-desktopRightColumn}}</label>
                    </div>
                </div>
                <div class="item-block">
                    <label class="item-title">
                        {{i18n-customAudience}}
                    </label>
                    <div class="item-content location-area">
                        <div class="ndp-drop-wrapper customaudience-clude" name="customaudience-clude"></div>
                        <div class="customaudience-c">
                            <select class="customaudience" ></select>
                        </div>
                    </div>
                </div>
                <div class="item-block">
                    <label class="item-title">
                        {{i18n-location}}
                    </label>
                    <div class="item-content location-area">
                        <div class="ndp-drop-wrapper location_types" name="location_types"></div>
                        <div class="ndp-drop-wrapper location-clude" name="location-clude"></div>
                        <div class="ndp-drop-wrapper location-type" name="location-type"></div>
                        <div class="location-s">
                            <div class="location-s-c">
                                <select class="location-select2 select2-hidden-accessible" ></select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item-block">
                    <label class="item-title">{{i18n-age}}</label>
                    <div class="item-content">
                        <div class="ndp-drop-wrapper min-age age" name="min-age"></div>
                        <span class="age-seperate">-</span>
                        <div class="ndp-drop-wrapper max-age age" name="max-age"></div>
                    </div>
                </div>
                <div class="item-block">
                    <label class="item-title">{{i18n-gender}}</label>
                    <div class="item-content">
                        <label class="radio-l"><input type="radio" name="gender" value="0" checked="checked">{{i18n-all2}}</label>
                        <label class="radio-l"><input type="radio" name="gender" value="1">{{i18n-men}}</label>
                        <label class="radio-l"><input type="radio" name="gender" value="2">{{i18n-women}}</label>
                    </div>
                </div>
            </div>
            <div>
                <hr/>
            </div>
            <div>
                <div class="item-block">
                    <label class="item-title">
                        {{i18n-name}}
                    </label>
                    <div class="item-content">
                        <input type="text" class="form-input" name="audience-name" style="width: 420px;"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="disable-content hide">
            <div clss="disable-content-v">
                <div class="go-account">
                    <span class="f-20">{{i18n-bindAccout}}<button class="btn btn-link d-a">{{i18n-productManage}}</button>{{i18n-setAccout}}</span>
                </div>
                <div class="go-product-set">
                    <span class="f-20">{{i18n-noProductSet}}<button class="btn btn-link d-a">{{i18n-productSet}}</button></span>
                </div>
            </div>
        </div>
    </div>
</div>